import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import PageLoading from '@/components/Global/PageLoading'
import { useEffect } from 'react'
import { useParams } from 'umi'
import { resumeTypeMap } from '@/const'
import { formateMoney } from '@/utils'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { barriersInfo, getBarriersInfo, resetBarriers } = store
    const { id }: any = useParams()

    useEffect(() => {
        getBarriersInfo(id)
        return () => {
            resetBarriers()
        }
    }, [])

    if (!Object.keys(barriersInfo).length) {
        return <PageLoading />
    }

    const { name, detail = [] } = barriersInfo || {}
    const lableList = {
        listName: '意向岗位',
        capacity: '求职意向',
        city: '意向城市',
        area: '工作区域',
        salary: '期望薪资（税前）',
        time: '入职时间',
    }

    return (
        <div className={styles.container}>
            <div className={styles.wrapper}>
                <div className={styles.resume_state}>
                    <div className={styles.label}>当前求职状态</div>
                    <div className={styles.value}>{detail?.[0]?.joinTime}</div>
                </div>
                <div className={styles.border_line} />
                <div className={styles.header}>求职意向</div>
                <div className={styles.content}>
                    {detail.length > 0 &&
                        detail.map((item: any, index: number) => (
                            <div className={styles.resume_item} key={`${item?.code}${item?.capacityId}`}>
                                <div className={styles.resume_title}>求职意向{index + 1}</div>
                                <div className={styles.resume_row}>
                                    {item.capacityName}
                                    <span className={styles.dot} />
                                    {resumeTypeMap.get(Number(item.type))}
                                </div>
                                <div className={styles.resume_row}>
                                    {item.cityName}
                                    <span className={styles.line} />
                                    {item.industryName}
                                </div>
                                {Number(item.type) !== 2 && (
                                    <div className={styles.resume_row}>
                                        {formateMoney(item.minSalary)} ~ {formateMoney(item.maxSalary)}
                                    </div>
                                )}
                            </div>
                        ))}
                </div>
            </div>
        </div>
    )
})
